<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">

        <ul>
            <li v-for="(item,index) in list">
                <button @click="list.splice(index,1)">{{item.name}}删除</button>
            </li>
        </ul>
        <!-- 计算属性不能当作函数调用，就是当作变量，在data变量不能同名，否则会报错 -->
        <!-- 计算属性比函数有优势 -->
        <!-- 计算函数会自动缓存计算得结果，比函数减少运算次数 -->
        <h1>{{totalage}}</h1>
        <h2>{{getAge()}}</h2>
        <h2>{{getAge()}}</h2>
        <h2>{{getAge()}}</h2>
        <button @click="totalage=100">修改年龄</button>
    </div>



    <script src=" vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                name: "",
                list: [
                    { id: 1, name: "小明", age: 18 },
                    { id: 2, name: "小红", age: 20 },
                    { id: 3, name: "小刚", age: 30 },

                ]

            },
            computed: {
                totalage() {
                    console.log('1  ----->  ', 1);
                    return this.list.reduce((pre, item) => {
                        return pre + item.age;
                    }, 0)
                }
                // totalage: {
                // get() {
                //     return this.list.reduce((pre, item) => {
                //         return pre + item.age;
                //     }, 0)

                // },
                // set(xxx) {
                //     this.list.forEach(item => {
                //         item.age = xxx;
                //     })



                // }
                // }

            },

            methods: {
                fn(e) {
                    this.list.push({
                        id: this.list.length + 1,
                        name: this.name
                    })

                },

                add() {
                    this.list.push({
                        id: this.list.length + 1,
                        name: this.name
                    })
                    console.log('键盘被巴拉了  ----->  ', '键盘被巴拉了');

                },
                getAge() {
                    console.log('2  ----->  ', 2);
                    return this.list.reduce((pre, item) => {
                        return pre + item.age;
                    }, 0)
                }

            }


        });
    </script>
</body>

</html>